<template>
	<view class="page">
		<status-bar title="站长中心"></status-bar>
		<view style="padding-top: 30rpx;"></view>
		<view class="top-box flex-box align-center thmeBg" :style="{'--color': color}">
			<view>
				<view class="num-lg">{{ myMoneys.income?myMoneys.income:'0.00' }}</view>
				<view class="txt">
					累计收益(元)
				</view>
				<view class="flex-box flex-between">
					<text>可提现：{{ myMoneys.v_money?myMoneys.v_money:'0.00' }}元</text>
					<text @click="toUrl('/moneyPage/capital/withdraw')">提现<text class="iconfont icon-xiangyouxiayiye"></text></text>
				</view>
			</view>
			<image class="station-head" :src="staticUrl+'/images/station-head.png'" mode="widthFix"></image>
		</view>
		<view class="menu-list flex-box">
			<view class="menu" @click="toUrl('/moneyPage/distributors/myFans')">
				<view class="icon-box">
					<text class="iconfont icon-001 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/001.png'" mode="aspectFit"></image>
				</view>
				<view>我的会员</view>
			</view>
			<view class="menu" @click="toUrl('/moneyPage/distributors/fenxiaoOrder')">
				<view class="icon-box">
					<text class="iconfont icon-002 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/002.png'" mode="aspectFit"></image>
				</view>
				<view>分销订单</view>
			</view>
			<view class="menu" @click="toUrl('/moneyPage/capital/brokerage_list')">
				<view class="icon-box">
					<text class="iconfont icon-003 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/003.png'" mode="aspectFit"></image>
				</view>
				<view>佣金明细</view>
			</view>
			<view class="menu" @click="toUrl('myStation')">
				<view class="icon-box">
					<text class="iconfont icon-004 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/004.png'" mode="aspectFit"></image>
				</view>
				<view>我的社区</view>
			</view>
			<view class="menu" @click="toUrl('order')">
				<view class="icon-box">
					<text class="iconfont icon-005 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/005.png'" mode="aspectFit"></image>
				</view>
				<view>渠道销量</view>
			</view>
			<view class="menu" @click="toUrl('myProfit')">
				<view class="icon-box">
					<text class="iconfont icon-006 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/006.png'" mode="aspectFit"></image>
				</view>
				<view>渠道佣金</view>
			</view>
			<view class="menu" @click="toUrl('train')">
				<view class="icon-box">
					<text class="iconfont icon-007 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/007.png'" mode="aspectFit"></image>
				</view>
				<view>推广学堂</view>
			</view>
			<view class="menu" @click="toUrl('publicity')">
				<view class="icon-box">
					<text class="iconfont icon-008 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/008.png'" mode="aspectFit"></image>
				</view>
				<view>宣传素材</view>
			</view>
			<view class="menu" @click="toUrl('activity')">
				<view class="icon-box">
					<text class="iconfont icon-009 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/009.png'" mode="aspectFit"></image>
				</view>
				<view>活动管理</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				myMoneys:''
			}
		},
		onShow() {
			that = this
			that.getMoney()
		},
		methods: {
			getMoney: function() {
				that.$http.get({
					url: '/singleSaleApi/singleCommission',
					data: {
						v_id: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.errcode == 100) {
						that.myMoneys = res.data
					}
				})
			}
		},
		onShareAppMessage() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid')
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		}
	}
</script>

<style lang="scss">
.page{
	.top-box{
		margin: 0 30rpx;
		padding: 20rpx;
		height: 318rpx;
		border-radius: 16rpx;
		position: relative;
		.station-head{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		>view{
			position: relative;
			z-index: 1;
			flex: 1;
			.num-lg{
				width: 100%;
				text-align: center;
				font-size: 84rpx;
				letter-spacing: -2rpx;
				color: white;
				font-weight: bold;
				margin-bottom: 10rpx;
				margin-top: 26rpx;
			}
			.txt{
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: white;
			}
			.flex-between{
				margin-top: 54rpx;
				text{
					color: white;
				}
				.icon-xiangyouxiayiye{
					margin-left: 10rpx;
				}
			}
		}
	}
	.menu-list{
		padding-top: 30rpx;
		flex-wrap: wrap;
		.menu{
			width: 33.33%;
			height: auto;
			text-align: center;
			padding-top: 50rpx;
			.icon-box{
				position: relative;
				.iconfont{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
				.icon-001{
					transform: scale(0.6);
					margin-top: -24rpx;
					margin-left: -20rpx;
				}
				.icon-002{
					margin-top: -12rpx;
					font-size: 28rpx;
					
				}
				.icon-003{
					margin-top: -6rpx;
					margin-left: -2rpx;
				}
				.icon-004{
					margin-top: -10rpx;
					margin-left: -4rpx;
				}
				.icon-005{
					transform: scale(0.75);
					margin-top: -26rpx;
					margin-left: -20rpx;
				}
				.icon-006{
					margin-top: -4rpx;
				}
				.icon-007{
					transform: scale(0.7);
					margin-top: -24rpx;
					margin-left: -24rpx;
				}
				.icon-008{
					margin-top: -6rpx;
				}
				.icon-009{
					margin-top: -16rpx;
				}
				.Icon{
					width: 64rpx;
					height: 64rpx;
					margin-bottom: 20rpx;
				}
			}
			view{
				font-size: 26rpx;
			}
		}
	}
}
</style>
